<template>
	<view class="page">
		<view class="bar_info" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left" @tap.stop="isBack">
					<u-icon size="38" color="#000" name="arrow-left"></u-icon>
				</view>
				<view class="title_bar_center">
					<text>{{name}}</text>
				</view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="input_list">
			<view class="input_item" v-for="(v, k) in card_info" :key="k">
				<view class="input_item_value">
					<view class="input_item_left">
						<text class="input_item_left_1">银行卡选择</text>
						<text class="input_item_left_2">*</text>
					</view>
					<view class="input_item_right" @tap.stop="selectCar(k)">
						<input class="input" v-model="v.card_cate_name" type="text" placeholder="请选择银行卡" :disabled="true"
							placeholder-style="color:#999;font-size:30rpx;">
						<view class="input_item_right_icon">
							<u-icon name="arrow-right" size="26" color="#999999"></u-icon>
						</view>
					</view>
				</view>
				<view class="input_item_value no_border">
					<view class="input_item_left">
						<text class="input_item_left_1">年交易额度(万)</text>
						<text class="input_item_left_2">*</text>
					</view>
					<view class="input_item_right">
						<input v-model="v.quota" class="input" type="number" maxlength="10" placeholder="请输入年交易额度"
							placeholder-style="color:#999;font-size:30rpx;">
					</view>
				</view>
				<view class="close_icon" v-if="v.default == 2"@tap.stop="del(k)">
					<u-icon name="close-circle" color="#999" size="36"></u-icon>
				</view>
			</view>
			<view class="add_view" @tap.stop="add">
				<image src="./static/1.png" mode=""></image>
			</view>
		</view>
		<view class="result_btn" @tap.stop="getResult">计算结果</view>
		
		<!--选择银行卡 -->
		<x-picker ref="benbenWritePickerCodepicker2" :visible.sync="show" @change="changeCard"
			:value.sync='card_id' :options='list' mode='selector' :mask-show='true' :timeout='true'
			:picker-height='88' default-type='value' :default-props='{ "label": "name", "value": "id" }'>
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between myInformation_picker3_0'>
					<text @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
					<text>选择银行卡</text>
					<text class='myInformation_picker3_0_c2'
						@tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确认</text>
				</view>
			</template>
		</x-picker>
	</view>
</template>

<script>
	import xPicker from './components/x-picker/benben-picker.vue'
	export default {
		data() {
			return {
				show: false,
				card_info: [
					{
						card_cate_name: "",
						card_cate_id: "",
						quota: "",
						default: 1
					}
				],
				card_index: 0,
				list: [],
				card_id: "",
				name: ""
			}
		},
		components: {
			xPicker
		},
		onLoad(option) {
			let {name} = option;
			if (name !== undefined) this.name = name;
			this.getBankList();
		},
		methods: {
			// 获取银行卡列表  postBankList
			getBankList() {
				this.$api.post(global.apiUrls.postBankList, {
					
				}).then(res => {
					if (res.data.code == 1) {
						this.list = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			add() {
				this.card_info.push({
					card_cate_name: "",
					card_cate_id: "",
					quota: "",
					default: 2
				})
			},
			del(k) {
				this.card_info.splice(k, 1);
			},
			
			isBack() {
				uni.navigateBack();
			},
			getResult() {
				let card_cate_name = -1;
				let quota = -1;
				this.card_info.forEach((v, k) => {
					if (!v.card_cate_name) {
						card_cate_name = k;
					}
					if (!v.quota) {
						quota = k;
					}
				})
				if (card_cate_name != -1) {
					this.$message.info('请选择银行卡');
					return;
				}
				if (quota != -1) {
					this.$message.info('请输入年交易额度');
					return;
				}
				
				this.$api.post(global.apiUrls.postCalcValue, {
					param: JSON.stringify(this.card_info)
				}).then(res => {
					// console.log(res);
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						uni.setStorageSync('card_info', JSON.stringify(this.card_info));
						uni.setStorageSync('calculationResults', res.data.data);
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/index/calculation'
							})
						}, 800)
					}
				})
				
			},
			selectCar(k) {
				this.card_index = k;
				this.show = true;
			},
			changeCard(e) {
				this.card_info[this.card_index].card_cate_name = e.result;
				this.card_info[this.card_index].card_cate_id = e.value;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myInformation_picker3_0_c2 {
		color: #0278FC;
	}
	
	.myInformation_picker3_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.page {
		.bar_info {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			// border-bottom: 1px solid #eee;
			// background: #fff;
			z-index: 10;
			position: fixed;
			top: 0rpx;

			.title_bar {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;

				.title_bar_left {
					width: 50rpx;
					display: flex;
					align-items: center;
				}

				.title_bar_center {
					line-height: 88rpx;
					font-size: 36rpx;
					font-weight: 400;
				}

				.title_bar_right {
					width: 50rpx;
				}
			}
		}

		.input_list {
			padding: 30rpx;
			position: relative;

			.input_item {
				padding: 0 30rpx;
				background: #fff;
				border-radius: 20rpx;
				margin-bottom: 24rpx;
				position: relative;
				.input_item_value {
					display: flex;
					align-items: center;
					padding: 40rpx 0;
					border-bottom: 1rpx solid #eee;

					.input_item_left {
						width: 230rpx;

						.input_item_left_1 {
							font-size: 30rpx;
							margin-right: 8rpx;
						}

						.input_item_left_2 {
							font-size: 30rpx;
							color: #CC0000;
						}
					}

					.input_item_right {
						width: calc(100% - 230rpx);
						display: flex;
						text-align: right;
						align-items: center;

						.input {
							width: 100%;
							font-size: 30rpx;
						}

						.input_item_right_icon {
							display: flex;
							align-items: center;
							width: 30rpx;
							margin-left: 8rpx;
						}
					}
				}

				.no_border {
					border-bottom: 1rpx solid #fff;
				}
				.close_icon {
					position: absolute;
					top: -15rpx;
					right: -15rpx;
				}
			}

			.add_view {
				width: 187rpx;
				height: 61rpx;
				position: absolute;
				left: 50%;
				bottom: -8rpx;
				transform: translateX(-50%);
				z-index: 99;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.result_btn {
			width: 610rpx;
			height: 100rpx;
			background: #BDD9FD;
			border-radius: 22rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
			line-height: 100rpx;
			margin: 300rpx auto 0;
		}
	}
</style>